<% title _("Settings") %>
<% title_actions documentation_button('3.5.2ConfigurationOptions') %>

<%= react_component('SettingRecords', { settings: grouped_settings(@settings) }) %>

<% if @search_error %>
<%= alert(class: 'alert-danger',
        header: _('Search error'),
        text: @search_error) %>
<% end %>

<% if @settings.empty? -%>
  <%= render plain: _('No entries found') %>
<% else -%>
  <ul class="nav nav-tabs" data-tabs="tabs">
    <% @settings.categories.each do |category, label| %>
      <li class="<%= 'active' if category == @settings.categories.keys.first %>">
        <a href="#<%= category %>_settings_tab" data-toggle="tab"><%= _(label) %></a>
      </li>
    <% end %>
  </ul>
<% end -%>

<div class="tab-content">
  <% @settings.categories.each do |category, _label| %>
    <div class="tab-pane<%= ' active' if category == @settings.categories.keys.first %>" id='<%= category %>_settings_tab' >
      <%= render_if_partial_exists "settings/category/#{category.downcase}", category %>

      <%= react_component('SettingsTable', { category: category }) %>

    </div>
  <% end %>
</div>
